<template>
  <a-card title="工单列表" class="work-order-table">
    <a-table
      :columns="columns"
      :data-source="workOrders"
      :pagination="false"
      row-key="id"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'overtime'">
          <a-tag :color="record.overtime ? 'red' : 'green'">
            {{ record.overtime ? '是' : '否' }}
          </a-tag>
        </template>
        <template v-if="column.key === 'action' && isAdmin">
          <a-button 
            type="link" 
            danger 
            @click="handleDelete(record.id)"
          >
            删除
          </a-button>
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script setup>
import { computed } from 'vue';
import { Table, Card, Tag, Button, Modal, message } from 'ant-design-vue';
import {useUser} from "./useUser.js"

const props = defineProps({
  workOrders: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['delete']);

const { currentUser } = useUser();
const isAdmin = computed(() => currentUser.value?.role === 'admin');

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '项目',
    dataIndex: 'project',
    key: 'project',
  },
  {
    title: '加班',
    dataIndex: 'overtime',
    key: 'overtime',
  },
  {
    title: '工时',
    dataIndex: 'hours',
    key: 'hours',
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    key: 'created_at',
  },
  {
    title: '操作',
    key: 'action',
    width: 100,
  },
];

const handleDelete = (id) => {
  Modal.confirm({
    title: '确认删除',
    content: '确定要删除这条工单吗？',
    okText: '确认',
    cancelText: '取消',
    onOk() {
      emit('delete', id);
      message.success('删除成功');
    },
  });
};
</script>

<style lang="less" scoped>
.work-order-table {
  margin-bottom: 24px;
}
</style>